var marquee = {
  time: 5 * 1000,
  height: 50,
  index: 0,
  autoplay: true,
  init: function () {
    this.render()
    this.autoplay && this.start()
    return this
  },
  render: function(){
    if (!(page.data.marquee && page.data.marquee.length)) return
    var data = page.data.marquee
    var html = '<div id="marquee_container" style="position:relative;">'
    for(var i = 0, l = data.length; i < l; i++){
      html += '<div class="marquee_item">' + data[i].typeIntroduce + '</div>'
    }
    html += '<div class="marquee_item">' + data[0].typeIntroduce + '</div>'
    html += '</div>'
    $('#marquee').html(html)
    return this
  },
  start: function(){
    if (!(page.data.marquee && page.data.marquee.length)) return
    var _this = this;
    var data = page.data.marquee
    setInterval(function() {
      if(_this.index === data.length){
        _this.index = 0
        $('#marquee_container').css('top', 0)
      }
      _this.index++
      $('#marquee_container').stop().animate({
        top: -_this.index * _this.height
      })
    }, this.time)
  }
};
